<template>
	<div class="container">
		<el-form >
			<el-row :gutter="20">
			  <el-col :span="6">
				  <div class="grid-content bg-purple1">
						<h2>{{details.productName}}</h2>
						<div>产品名称</div>
					</div>
			    </el-col>

			    <el-col :span="6">
			  	  <div class="grid-content bg-purple2">
			  			<h2>{{details.batch}}</h2>
			  			<div>加工批号</div>
			  		</div>
			    </el-col>

			  <el-col :span="6">
				  <div class="grid-content bg-purple3">
						<h2>{{details.grade}}</h2>
						<div>品级</div>
					</div>
			  </el-col>

				<el-col :span="6">
				  <div class="grid-content bg-purple4">
						<h2>{{details.surplusNumber}}{{details.units}}</h2>
						<div>待分包数量</div>
					</div>
				</el-col>
			</el-row>
		</el-form>
		 <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
			<el-row style="margin-top:50px;">
				<el-col>
					<el-form-item label="规格：" prop="reapNumber">
            <div slot="label">规格</div>
            <!-- <div slot="label" style="line-height: 0px" show="$store.state.zangw=='1'">ཚད་གཞི་  </div> -->
					    <el-input placeholder="请输入" v-model="ruleForm.spec"  style="width: 200px">
					        <template slot="append">
								<!-- {{details.units}} -->
					            <el-select v-model="ruleForm.specUnits"  placeholder="单位"  value-key="id"   style="width:80px !important">
					                <el-option v-for="item2 in unitList" :key="item2.id" :label="item2.name" :value="item2.name">{{item2.name}}</el-option>
					            </el-select>
					        </template>
					    </el-input>
					    <!-- <el-button style="margin-left:10px">单位管理</el-button> -->
					</el-form-item>
					<el-form-item label="分包时间：">
            <div slot="label">分包时间</div>
            <!-- <div slot="label" style="line-height: 0px" show="$store.state.zangw=='1'">ཆ་བགོས་སྒྲུབ་འགན་ལེན་པའི་དུས་ཚོད་ </div> -->
					    <el-date-picker
					        v-model="ruleForm.createtime"
					        type="date"
					        value-format="yyyy-MM-dd"
					        placeholder
					        style="width: 300px"
					    ></el-date-picker>
					</el-form-item>
					<el-form-item label="分包批次：">
            <div slot="label">分包批次</div>
            <!-- <div slot="label" style="line-height: 0px" show="$store.state.zangw=='1'">ཁག་བགོས་འགན་གཙང་ལེན་གྱི་ཐེངས་གྲངས་  </div> -->
					    <el-input v-model="ruleForm.batch" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="追溯码数量：">
            <div slot="label">追溯码数量</div>
            <!-- <div slot="label" style="line-height: 0px" show="$store.state.zangw=='1'">ཁུངས་འདེད་ཨང་གི་གྲངས་འབོར་ </div> -->
					    <el-input v-model="ruleForm.subNumber" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="分包数量：">
            <div slot="label">分包数量</div>
            <!-- <div slot="label" style="line-height: 0px" show="$store.state.zangw=='1'">ཆ་བགོས་སྒྲུབ་འགན་ལེན་གྲངས་ </div> -->
					    <el-input v-model="ruleForm.branchPackageNum" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item >

						<el-checkbox v-model="radio">容错率5%，开启后，会增加5%的码</el-checkbox>
					</el-form-item>

				</el-col>
			</el-row>
			<el-form-item class="footerFixed" label-width="0px">
			    <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
			    <el-button @click="backPage">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {unit_findByList,sub_save} from "@/request/api"
	export default {
		data(){
			return{
				disabled:false,
				radio:true,
				ruleForm:{},
				rules:{},
				labelPosition:"right",
				unitList:[],
				details:[],
				source:''
			}
		},
		mounted(){
			this.details = this.$route.query.content
			var type = this.$route.query.type

			// this.source = this.$route.query.source
			this.init()
			var d = new Date();
			var curr_date = d.getDate();
			var curr_month = d.getMonth() + 1;
			var curr_year = d.getFullYear();
			String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
			String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
			var yyyyMMdd = curr_year + "" + curr_month +""+ curr_date;
			this.ruleForm.batch = yyyyMMdd + Math.ceil(Math.random()*10000);
			this.batch = this.ruleForm.batch
		},
		methods:{
			init(){
				//获取单位
				unit_findByList('').then((res) => {
					this.unitList = res.data;
				});
			},
			// 点击提交分包
			submitrule(){
				console.log(this.radio)
				if(this.radio == true){
					this.ruleForm.isOK = 1
				}
				if(this.radio == false){
					this.ruleForm.isOK = 0
				}
                this.ruleForm.type = "1111"
				this.ruleForm.relevanceId = this.details.id
				this.ruleForm.source = this.details.source
				this.ruleForm.productName = this.details.productName
				// this.ruleForm.batch = this.details.batch
				this.ruleForm.grade = this.details.grade
				this.ruleForm.weight = this.ruleForm.subNumber*this.ruleForm.spec
				this.ruleForm.units = this.details.units
				if(this.ruleForm.weight <= 0){
					this.$notify({
						title: '提示',
						message: '规格和追溯码数量不能小于0或等于0',
						type: 'info',
						duration:1000
					});
				}else{
					if(this.ruleForm.weight>this.details.surplusNumber){
						this.$notify({
							title: '提示',
							message: '分包总计量不能大于待分包数量',
							type: 'info',
							duration:1000
						});
						return false
					}else{
						console.log(this.ruleForm,'1111')
						this.$confirm('确定要分包吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							sub_save(this.ruleForm).then((res)=>{
								this.$notify({
									title: '提示',
									message: '分包成功',
									type: 'success',
									duration:1000
								});
								this.$router.go(-1)
							})
						})
					}
				}
			},
			backPage(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple1 {
    background: #409EFF 10000%;
  }
  .bg-purple2 {
    background: #F56C6C 10000%;
  }
  .bg-purple3 {
    background: #67C23A 10000%;
  }
  .bg-purple4 {
    background: #909399 10000%;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 80px;
	color:white;
  }
  .grid-content div{
	  text-align: right;
	  font-size:14px;
	  margin-top:4px;
	  padding-right:20px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  h2{
	  color:white;
	  text-align: right;
	  padding-top:20px;
	  padding-right:20px;
  }
</style>
